<template>
	<view>
		<view class="its">
			<view class="it_tit">
				<view class="">
					<image src="@/static/icon1.png" mode=""></image>
				</view>
				<view class="">
					客户信息
				</view>
			</view>
			<view class="inputs">
				<view class="text_l">
					姓名
				</view>
				<view class="text_r">
					<input confirm-type="done" v-model="params.customerName" type="text" placeholder="请输入"
						placeholder-class="inputplace" />
				</view>
				<!-- 	<view class="ads">
					姓名不能为空
				</view> -->
			</view>

			<view class="inputs" style="border: none;">
				<view class="text_l">
					电话
				</view>
				<view class="text_r">
					<input maxlength="11" confirm-type="done" v-model="params.customerPhone" type="number"
						placeholder="请输入" placeholder-class="inputplace" />
				</view>
			</view>
		</view>
		<view class="its">
			<view class="it_tit">
				<view class="">
					<image src="@/static/icon2.png" mode=""></image>
				</view>
				<view class="">
					包型及尺寸
				</view>
			</view>

			<view class="inputs" :style="{border:mevalue.baoxing?'':'none'}">
				<view class="text_l">
					包型
				</view>
				<view class="text_select" @click="openPopup('包型')">
					<view class="select" :class="mevalue.baoxing==''?'':'selectact'">
						{{mevalue.baoxing?mevalue.baoxing:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
			<view class="" v-if="mevalue.baoxing">
				<view class="sc_flex">
					<view class="item">
						<view class="">长(cm)</view>
						<input confirm-type="done" type="digit" v-model="params.sizeLong" />
					</view>
					<view class="item" v-if="params.dimensionType == '3D'">
						<view class="">宽(cm)</view>
						<input confirm-type="done" type="digit" v-model="params.sizeWidth" />
					</view>
					<view class="item">
						<view class="">高(cm)</view>
						<input confirm-type="done" type="digit" v-model="params.sizeHeight" />
					</view>
					<view class="item" v-if="params.mouthType == 'CK'">
						<view class="">舌(cm)</view>
						<input confirm-type="done" type="digit" v-model="params.sizeShe" />
					</view>
				</view>
				<view class="inputs flex_jub">
					<view class="text_l">
						另加尺寸(cm)
					</view>
					<view class="">
						<uni-number-box :min='-100000' v-model="params.singleHeightPlus" />
					</view>
				</view>
				<view class="inputs" style="border: none;">
					<view class="text_l">
						幅宽(cm)
					</view>
					<view class="text_select">
						<view class="">{{fukuan}}</view>
						<view class="ts" style="color: red;font-size: 24rpx;">
							注意：幅宽需是5的倍数
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="its">
			<view class="it_tit">
				<view class="">
					<image src="@/static/icon3.png" mode=""></image>
				</view>
				<view class="">
					更多信息
				</view>
			</view>
			<view class="inputs" v-if="params.mouthType == 'CK'">
				<view class="text_l">
					加胶条
				</view>
				<view class="">
					<radio-group @change="radioChange">
						<label style="margin-right: 30rpx;">
							<radio style="scale: 0.7;" color="#196AEB" value="1" />是
						</label>
						<label>
							<radio style="scale: 0.7;" color="#196AEB" value="0" checked="true" />否
						</label>
					</radio-group>
				</view>
			</view>
			<view class="inputs">
				<view class="text_l">
					材料
				</view>
				<view class="text_select" @click="openPopup('材料')">
					<view class="select" :class="mevalue.cailiao==''?'':'selectact'">
						{{mevalue.cailiao?mevalue.cailiao:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
			<view class="inputs">
				<view class="text_l">
					数量
				</view>
				<view class="text_r">
					<input :min='1' type="number" v-model="params.productCount" confirm-type="done" placeholder="请输入"
						placeholder-class="inputplace" />
				</view>
			</view>
			<view class="inputs">
				<view class="text_l">
					发货方式
				</view>
				<view class="text_select" @click="openPopup('发货方式')">
					<view class="select" :class="mevalue.fahuo==''?'':'selectact'">
						{{mevalue.fahuo?mevalue.fahuo:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
			<view class="inputs">
				<view class="text_l">
					其他费用
				</view>
				<view class="text_r">
					<input confirm-type="done" type="digit" v-model="params.singleCostAmountPlusOther"
						placeholder="请输入" placeholder-class="inputplace" />
				</view>
			</view>
			<view class="inputs" style="border: none;">
				<view class="text_l">
					税点
				</view>
				<view class="text_select" @click="openPopup('税点')">
					<view class="select" :class="mevalue.shuidian==''?'':'selectact'">
						{{mevalue.shuidian?mevalue.shuidian:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
		</view>
		<view class="its">
			<view class="it_tit">
				<view class="">
					<image src="@/static/icon4.png" mode=""></image>
				</view>
				<view class="">
					打包体积
				</view>
			</view>
			<view class="tj">
				<view class="ti_flex">
					<view class="texts">{{mevalue.pingfang}}</view>
					<view class="dw">m³</view>
				</view>
				<view class="btn" @click="jsbj">
					点击计算
				</view>
			</view>
		</view>
		<view class="zw">
		</view>

		<view class="btns" @click="handleTj">
			<view class="text">报价</view>
		</view>
		<uni-popup type="bottom" ref="popup" :safe-area="false">
			<view class="popup">
				<view class="pop_tit">
					请选择{{textType}}
				</view>
				<view class="pop_list">
					<view class="ites" v-for="(item,index) in list" :key="index" @click="changeType(item)"
						:class="item.dictLabel==dictLabel?'itesactive':''">
						{{item.dictLabel}}
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popupbj" type="center">
			<view class="popupbj">
				<view class="title">报价结果</view>
				<uni-icons @click="close" class="icons" type="closeempty" size="20"></uni-icons>
				<view class="cont_top">
					<view class="flex_l">
						<view class="itss">
							姓名 <span>{{nowinfo.customerName}}</span>
						</view>
						<view class="itss">
							电话 <span>{{nowinfo.customerPhone}}</span>
						</view>
					</view>
					<view class="flex_r">
						<image :src="url" mode=""></image>
						<!-- <image src=`'/static/img/'${nowinfo.dimensionType}${nowinfo.mouthType}'.png'` mode=""></image> -->
						<view class="ts">模型展示</view>
					</view>
				</view>
				<view class="cont_c">
					<view class="item">
						<view class="i_ltext">包型</view>
						<view class="">{{nowinfo.dimensionType}}{{nowinfo.mouthType}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">尺寸</view>
						<view class="">
							<span v-if="nowinfo.sizeLong">
								长:{{nowinfo.sizeLong}} cm；
							</span>
							<span v-if="nowinfo.sizeWidth">
								宽:{{nowinfo.sizeWidth}} cm；
							</span>
							<span v-if="nowinfo.sizeHeight">
								高:{{nowinfo.sizeHeight}} cm；
							</span>
							<span v-if="nowinfo.sizeShe">
								舌:{{nowinfo.sizeShe}} cm
							</span>
						</view>
					</view>
					<view class="item">
						<view class="" style="display: flex;align-items: center;width: 50%;">
							<view class="i_ltext">另加尺寸</view>
							<view class="">{{nowinfo.singleHeightPlus}} cm</view>
						</view>
						<view class="" style="display: flex;align-items: center;width: 50%;">
							<view class="i_ltext">幅宽</view>
							<view class="">{{nowinfo.singleHeightReal}} cm</view>
						</view>
					</view>
					<view class="item">
						<view class="i_ltext">加胶条</view>
						<view class="">{{nowinfo.tape==1?'是':'否'}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">材料</view>
						<view class="">{{nowinfo.materialName}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">数量</view>
						<view class="">{{nowinfo.productCount}} 个</view>
					</view>
					<view class="item">
						<view class="i_ltext">发货方式</view>
						<view class="">{{nowinfo.deliveryCode}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">其他费用</view>
						<view class="">{{nowinfo.singleCostAmountPlusOther}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">税点</view>
						<view class="">{{nowinfo.taxCode}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">打包体积</view>
						<view class="">{{nowinfo.volume}} m³</view>
					</view>
				</view>
				<view class="cont_b">
					<view class="b_l">
						最终单价(元) <span>含税</span>
					</view>
					<view class="b_r">
						<span>￥</span>{{nowinfo.totalAmount}}
					</view>
				</view>

				<view class="btn" @click="gopage1img">
					生成海报
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getdict,
		getMianall,
		computedTj,
		postQuote
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				params: {
					"customerName": "", //姓名
					"customerPhone": "", //电话
					"dimensionType": '', //普通2D 立体3D
					"mouthType": '', //平口PK 错口CK
					"singleHeightPlus": '', //另加尺寸
					"sizeLong": '', //长
					"sizeHeight": '', //高
					"sizeWidth": '', //宽
					"sizeShe": '', //舌
					"productCount":'', //数量
					"materialCode": "", //材料
					"tape": 0, //胶条 1是 0否
					"singleCostAmountPlusOther": '', //吉他费用
					"deliveryCode": "", //发货方式
					"taxCode": '', //岁点
				},
				mevalue: {
					baoxing: '',
					cailiao: '',
					fahuo: '',
					shuidian: '',
					pingfang: 0
				},
				list: [],
				dictLabel: '', //弹窗公共渲染值
				textType: '', //弹窗公共渲染值
				bxlist: [{
						id: 1,
						dictLabel: '普通平口',
						dictValue: '',
						dimensionType: '2D',
						mouthType: 'PK',
					},
					{
						id: 2,
						dictLabel: '普通错口',
						dictValue: '',
						dimensionType: '2D',
						mouthType: 'CK',
					},
					{
						id: 3,
						dictLabel: '立体平口',
						dictValue: '',
						dimensionType: '3D',
						mouthType: 'PK',
					},
					{
						id: 4,
						dictLabel: '立体错口',
						dictValue: '',
						dimensionType: '3D',
						mouthType: 'CK',
					}
				],
				nowinfo: {}
			};
		},
		computed: {
			fukuan() {
				let num = 0
				console.log(Number(this.params.sizeWidth));
				num = Number(this.params.sizeHeight) * 2 +
					Number(this.params.sizeWidth) +
					Number(this.params.sizeShe) +
					Number(this.params.singleHeightPlus)
				return num.toFixed(2)
			},
			url(){
				if(this.nowinfo.dimensionType&&this.nowinfo.mouthType){
					console.log(this.nowinfo.dimensionType + this.nowinfo.mouthType,'2222');
					return 	`/static/img/${this.nowinfo.dimensionType + this.nowinfo.mouthType}.png`
				}
			}
		},
		onLoad() {
			getdict('self_tax_type').then(res => {})
		},
		methods: {
			gopage1img() {
				uni.setStorageSync('hbinfo', this.nowinfo)
				uni.navigateTo({
					url: '/pages/ipage/page1hb'
				})
			},
			close() {
				this.$refs.popupbj.close()
			},
			jsbj() {
				if (this.mevalue.baoxing == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择包型'
					})
					return
				}
				if (this.params.sizeLong == '') {
					uni.showToast({
						icon: 'none',
						title: '尺寸长不能为空'
					})
					return
				}
				if (this.params.sizeHeight == '') {
					uni.showToast({
						icon: 'none',
						title: '尺寸高不能为空'
					})
					return
				}
				if (this.mevalue.baoxing == '立体平口' || this.mevalue.baoxing == '立体错口'){
					if (this.params.sizeWidth == '') {
						uni.showToast({
							icon: 'none',
							title: '尺寸宽不能为空'
						})
						return
					}
				}
				if (this.mevalue.baoxing == '普通错口' || this.mevalue.baoxing == '立体错口'){
				if (this.params.sizeShe == '') {
					uni.showToast({
						icon: 'none',
						title: '尺寸舌不能为空'
					})
					return
				}
				}
			
				if (this.params.productCount == '') {
					uni.showToast({
						icon: 'none',
						title: '数量不能为空'
					})
					return
				}
				if (this.params.materialCode == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择材料'
					})
					return
				}
				let obj = {
					sizeLong: this.params.sizeLong,
					sizeWidth: this.params.sizeWidth,
					sizeHeight: this.params.sizeHeight,
					sizeShe: this.params.sizeShe,
					productCount: this.params.productCount,
					materialCode: this.params.materialCode,
					dimensionType: this.params.dimensionType,

				}
				computedTj(obj).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '计算结果已更新'
						})
						this.mevalue.pingfang = res.data
					}
				})
			},
			getcailiaolist() {
				getMianall({
					disabled: 0
				}).then(res => {
					if (res.code == 200) {
						this.list = res.data.map(item => {
							return {
								dictLabel: item.name,
								dictValue: item.code,
							}
						})
						if (this.mevalue.cailiao) {
							this.dictLabel = this.mevalue.cailiao
						}
					}

				})
			},
			openPopup(text) {
				this.list = []
				this.textType = text //弹窗
				if (text == '包型') {
					this.list = this.bxlist
					if (this.mevalue.baoxing) {
						this.dictLabel = this.mevalue.baoxing
					}
				} else if (text == '材料') {
					this.getcailiaolist()
				} else if (text == '发货方式') {
					getdict('self_delivery_type').then(res => {
						this.list = res.data
						if (this.mevalue.fahuo) {
							this.dictLabel = this.mevalue.fahuo
						}
					})
				} else if (text == '税点') {
					getdict('self_tax_type').then(res => {
						this.list = res.data
						if (this.mevalue.shuidian) {
							this.dictLabel = this.mevalue.shuidian
						}
					})
				}
				this.$refs.popup.open()
			},
			changeType(item) {
				console.log(this.textType, item);
				if (this.textType == '包型') {
					this.mevalue.baoxing = item.dictLabel
					this.params.dimensionType = item.dimensionType
					this.params.mouthType = item.mouthType
					this.params.sizeLong = ''
					this.params.sizeHeight = ''
					this.params.sizeWidth = ''
					this.params.sizeShe = ''
					this.params.singleHeightPlus = 0
				} else if (this.textType == '材料') {
					this.mevalue.cailiao = item.dictLabel
					this.params.materialCode = item.dictValue
				} else if (this.textType == '发货方式') {
					this.mevalue.fahuo = item.dictLabel
					this.params.deliveryCode = item.dictValue
				} else if (this.textType == '税点') {
					this.mevalue.shuidian = item.dictLabel
					this.params.taxCode = item.dictValue
				}
				this.$refs.popup.close()
			},
			//单选
			radioChange(e) {
				this.params.tape = e.detail.value
			},
			handleTj() {
				// this.$refs.popupbj.open()
				// uni.navigateTo({
				// 	url:'/pages/ipage/page1hb'
				// })
				
				if (this.params.customerName == '') {
					uni.showToast({
						icon: 'none',
						title: '姓名不能为空'
					})
					return
				}
				if (this.params.customerPhone == '') {
					uni.showToast({
						icon: 'none',
						title: '电话不能为空'
					})
					return
				}
				if (this.mevalue.baoxing == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择包型'
					})
					return
				}
				if ((this.fukuan % 5) != 0 || this.fukuan == 0) {
					uni.showToast({
						icon: 'none',
						title: '幅宽需是5的倍数，请调整尺寸'
					})
					return
				}
				if (this.mevalue.cailiao == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择材料'
					})
					return
				}
				if (this.mevalue.fahuo == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择发货方式'
					})
					return
				}
				if (this.mevalue.shuidian == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择税点'
					})
					return
				}
				postQuote(this.params).then(res => {
					if (res.code == 200) {
						this.nowinfo = res.data
						this.$refs.popupbj.open()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.popupbj {
		width: 690rpx;
		height: 1180rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
		}

		.icons {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		.cont_top {
			width: 630rpx;
			background: #F8F8F8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			padding: 16rpx 26rpx 10rpx 20rpx;
			box-sizing: border-box;
			justify-content: space-between;

			.flex_l {
				.itss {
					margin-bottom: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #979797;
					line-height: 33rpx;

					span {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						margin-left: 20rpx;
					}
				}

			}

			.flex_r {
				text-align: center;

				image {
					width: 160rpx;
					height: 160rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 1rpx solid #DADADA;
				}

				.ts {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #C9C9C9;
				}
			}
		}

		.cont_c {
			border-bottom: 1px solid #eee;
			padding-bottom: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;

			.item {
				display: flex;
				margin: 18rpx auto;
				align-items: center;

				.i_ltext {
					width: 120rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #979797;
					margin-right: 20rpx;
				}
			}
		}

		.cont_b {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 32rpx auto;

			.b_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

				span {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FF1919;
					margin-left: 6rpx;
				}
			}

			.b_r {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #FF1A1A;

				span {
					font-size: 24rpx;
				}
			}
		}

		.btn {
			width: 520rpx;
			height: 80rpx;
			background: #196AEB;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			text-align: center;
			line-height: 80rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: 0 auto;
		}
	}

	page {
		background: #F7F8FA;
	}

	.popup {
		width: 750rpx;
		max-height: 720rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -12rpx 26rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 48rpx 76rpx;
		box-sizing: border-box;

		.pop_tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			text-align: center;
		}

		.pop_list {
			overflow: auto;
			max-height: 560rpx;
			margin-top: 20rpx;
		}

		.ites {
			height: 120rpx;
			background: #F6F6F6;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-bottom: 20rpx;
			text-align: center;
			line-height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.itesactive {
			background: #196AEB;
			color: #ffffff;
		}
	}

	.inputplace {
		color: #DADADA;
		font-size: 28rpx;
	}

	.its {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 20rpx auto;
		padding: 28rpx 26rpx 0rpx 26rpx;
		box-sizing: border-box;

		.sc_flex {
			display: flex;
			justify-content: space-between;
			margin: 20rpx auto;

			.item {
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;

				input {
					width: 90%;
					height: 68rpx;
					background: #F6F6F6;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-top: 15rpx;
				}
			}
		}

		.flex_jub {
			display: flex;
			justify-content: space-between;
		}

		.it_tit {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 5rpx;
			}

			font-family: PingFang SC,
			PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
		}

		.tj {
			margin: 20rpx auto;
			padding-bottom: 26rpx;
			display: flex;
			justify-content: space-between;

			.texts {
				width: 306rpx;
				height: 60rpx;
				background: #F6F6F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding-left: 10rpx;
				font-size: 28rpx;
				line-height: 60rpx;
			}

			.ti_flex {
				display: flex;
				align-items: center;

				.dw {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					margin-left: 10rpx;
				}
			}

			.btn {
				height: 60rpx;
				background: #196AEB;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 60rpx;
				padding: 0 16rpx;
			}
		}

		.inputs {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			margin-top: 30rpx;
			padding-bottom: 26rpx;
			position: relative;

			.ads {
				position: absolute;
				bottom: 0%;
				font-size: 24rpx;
				color: red;
			}

			.text_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				width: 174rpx;
			}

			.text_r {
				flex: 1;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.text_select {
				flex: 1;
				display: flex;
				justify-content: space-between;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				align-items: center;

				.select {
					color: #DADADA;
				}

				.selectact {
					color: #000000;
				}
			}
		}
	}

	.btns {
		position: fixed;
		bottom: 0%;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9;
		background-color: #F7F8FA;

		.text {
			width: 710rpx;
			height: 100rpx;
			background: #196AEB;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			margin: 0 auto;
			box-sizing: border-box;
		}
	}

	.zw {
		height: calc(110rpx + constant(safe-area-inset-bottom));
		height: calc(110rpx + env(safe-area-inset-bottom));
	}
</style>